<template>
	<view class="duihuan">
		<view class="tips">
			恭喜获得
		</view>
		<view class="cards" v-if="extractionResults.length !== 3">
			<view class="card" v-for="item in extractionResults" :key="item.goods_id">
				<view class="content">
					<image :src="item.cover_image"></image>
					<view class="name">{{item.goods_name}}</view>
					<view class="type" :class="getClass(item.type)">{{item.type}}</view>
				</view>

			</view>
		</view>
		<view class="cards" v-else :style="extractionResults.length == 3?'padding:0 100rpx;':''">
			<view class="card" v-for="item in extractionResults" :key="item.goods_id">
				<view class="content">
					<image :src="item.cover_image"></image>
					<view class="name">{{item.goods_name}}</view>
					<view class="type" :class="getClass(item.type)">{{item.type}}</view>
				</view>

			</view>
		</view>
		<view class="btns">
			<view class="btn btn1" @click="goBag">去背包查看
				<!-- <text>2.5派豆</text> -->
			</view>
			<view class="btn btn2" @click="palyAgain">再来一次</view>
		</view>
		<view class="btns">
			<view class="btn btn2 backBtn" @click="back">返回</view>
		</view>
	</view>
</template>
<script>
	// const bgmMusic = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				num: 1,
				order_id: '',
				id: '',
				extractionResults: []
			}
		},
		filters: {
			typeFilter(v) {
				switch (v) {
					case 1:
						return '传说';
					case 2:
						return '史诗';
					case 3:
						return '稀有';
					case 4:
						return '普通';
					default:
						break;
				}
			}
		},
		onLoad(option) {
			this.num = option.num
			this.order_id = option.order_id
			this.id = option.id
			this.getIndexExtractboxc()

		},

		onShow() {

		},
		onHide() {
			this.$store.commit('playMusicStop')
		},
		methods: {
			goBag() {
				uni.navigateTo({
					url: '/pages/package/package'
				})
			},
			palyAgain() {
				// 获取所有页面栈实例列表
				let pages = getCurrentPages();
				// 当前页页面实例
				let nowPage = pages[pages.length - 1];
				// 上一页页面实例
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.palyAgain = this.num;
				uni.navigateBack({
					delta: 1
				});

			},
			//获取抽取盲盒结果
			getIndexExtractboxc() {

				console.log(this.id, this.order_id, '获取抽取盲盒结果');
				this.$api.indexExtractboxc({
					activity_id: this.id,
					order_id: this.order_id,
				}).then(res => {
					this.$store.commit('playMusic', '/static/choujiangjieguo.mp3')
					this.extractionResults = res;
					// this.getPaidorder();
				}).catch(err => {
					console.log(err);
				})

			},
			getClass(str) {
				if (str === '传说') return 'lv1'
				if (str === '史诗') return 'lv2'
				if (str === '稀有') return 'lv3'
				if (str === '普通') return 'lv4'
			},
			back() {
				if (!uni.getStorageSync('token')) {
					uni.switchTab({
						url: '/pages/choujiang/index'
					})
				} else {
					uni.navigateBack({
						delta: 2
					})
					// uni.navigateTo({
					// 	url: '/pages/index/extractionBlindbox'
					// })
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.back {
		padding: 26rpx 0 0 50rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.duihuan {
		width: 100vw;
		height: 100vh;
		background-color: #000;
		color: #fff;

		.tips {
			font-size: 40rpx;
			font-style: italic;
			letter-spacing: 2rpx;
			margin-bottom: 100rpx;
			text-align: center;
			padding-top: 50rpx;
		}

		.cards {
			width: 100%;
			height: 600rpx;
			padding: 10rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap-reverse;
			justify-content: center;

			// align-items: center;
			.card {
				width: 235rpx;
				margin: 0 5rpx 20rpx;

				.content {
					width: 100%;
					// border: 1px solid rgb(38, 57, 134);
					background-image: url('@/static/images/card.png');
					background-repeat: no-repeat;
					background-size: 110% 100%;
					background-position: center center;
					position: relative;
					padding: 40rpx 20rpx;
					box-sizing: border-box;

					.name {
						width: 100%;
						box-sizing: border-box;
						font-size: 12rpx;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal !important;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					image {
						width: 175rpx;
						height: 175rpx;
					}

					.type {
						position: absolute;
						top: 0;
						right: 0;
						font-weight: 600;
						font-style: italic;
					}
				}

				.info {
					width: 100%;
					font-size: 14rpx;
					padding: 20rpx 0;
					border: 1px solid rgb(39, 54, 59);
					box-shadow: inset 0 0 10rpx 10rpx rgb(39, 54, 59);
					margin-top: 10rpx;
					text-align: center;

					.count {
						margin-left: 10rpx;
					}
				}


			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;

			.btn {
				width: 270rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: url('@/static/images/tiaoguo.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-size: 32rpx;

				text {
					font-size: 12rpx;
				}
			}

			.btn1 {
				margin-right: 50rpx;
				flex-direction: column;
			}
		}

		.lv1 {
			color: #7e1221 !important;
		}

		.lv2 {
			color: #57517d !important;
		}

		.lv3 {
			color: #ba886f !important;
		}

		.lv4 {
			color: #6172aa !important;
		}
	}
</style>
